<template>
    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="30" type="flex" justify="space-between">
            <Col v-bind="grid">
                <FormItem label="所属组织：" prop="orgcode" label-for="orgcode">
                    <Select v-model="data.orgcode" placeholder="请选择" element-id="orgcode">
                        <Option value="">请选择</Option>
                        <Option v-for="item in orgList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="用餐类型：" prop="productid" label-for="productid">
                    <Select v-model="data.productid" placeholder="请选择" element-id="productid">
                        <Option value="">请选择</Option>
                        <Option v-for="item in productList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col  v-bind="grid">
                <FormItem label="人员类型" prop="persontype" label-for="persontype">
                    <Select v-model="data.persontype" placeholder="请选择" element-id="persontype">
                        <Option value="">请选择</Option>
                        <Option value="1">员工</Option>
                        <Option value="2">业主</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="开始日期：" prop="startdate" label-for="startdate">
                    <DatePicker v-width="'100%'" v-model="data.startdate" type="date" placeholder="请选择" element-id="startdate" />
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="结束日期：" prop="enddate" label-for="enddate">
                    <DatePicker v-width="'100%'" v-model="data.enddate" placeholder="请选择" element-id="enddate" />
                </FormItem>
            </Col>
            <Col span="4" class="ivu-text-right">
                <FormItem>
                    <Button type="primary" @click="handleSubmit">查询</Button>
                    <Button class="ivu-ml-8" @click="handleReset">重置</Button>
                    <a style="display:none" v-font="14" class="ivu-ml-8" @click="collapse = !collapse">
                        <template v-if="!collapse">
                            展开 <Icon type="ios-arrow-down" />
                        </template>
                        <template v-else>
                            收起 <Icon type="ios-arrow-up" />
                        </template>
                    </a>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import { productDataSource } from "@api/product";
    import {parentDataSource } from "@api/org";
    export default {
        data () {
            return {
                grid: {
                    xl: 5,
                    lg: 5,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    orgcode: '',
                    productid: '',
                    persontype:'1',
                    startdate: '',
                    enddate: ''
                },
                formData:{},
                rules: {

                },
                productList:[],
                orgList:[]
            }
        },
        computed: {
            labelWidth () {
                return this.isMobile ? undefined : 100;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        methods: {
            handleSubmit () {
                this.$emit('on-submit', this.data);
            },
            handleReset () {
                this.formData=this.data;
                this.$refs.form.resetFields();
               // this.$emit('on-reset');
                this.data = Object.assign({}, this.formData);
            }
        },
        created(){            
            productDataSource().then(result=>{
                if(result.errcode==0){
                    this.productList=result.data;
                }
            });
            parentDataSource().then(res=>{
                if(res.errcode!=0)
                {
                    this.$Message.errcode(res.msg);
                    return;
                }
                this.orgList=res.data;
            });
        }
    }
</script>
